<!--用于图片、文档等格式的附件上传-->
<template>
  <a-upload
    :fileList="fileList"
    name="file"
    :headers="headers"
    :data="{biz:bizPath}"
    :action="actionUrl"
    list-type="picture"
    @change="handleChange"
    :default-file-list="defaultFileList"
  >
    <a-button>
      <a-icon type="upload" />
      {{ text }}
    </a-button>
  </a-upload>

</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getFileAccessHttpUrl } from '@api/manage'

export default {
  name: 'HUpload',
  props: {
    value: {
      type: [String, Array],
      required: false,
    },
    actionUrl: {
      type: String
    },
    text: {
      type: String,
      default: '点击上传'
    },
    bizPath: {
      type: String,
      required: false,
      default: 'temp'
    }
  },
  data() {
    return {
      fileList: [],
      defaultFileList:[],
      headers: {}
    }
  },
  watch: {
    value(val) {
      console.log(val, 'val')
      if (val instanceof Array) {
        this.initFileList(val.join(','))
      } else {
        this.initFileList(val)
      }
      if (!val || val.length == 0) {
        this.picUrl = false
      }
    },
  },
  created() {
    this.headers = { loginUserToken: Vue.ls.get(ACCESS_TOKEN) }
  },
  methods: {
    initFileList(paths) {
      if (!paths || paths.length == 0) {
        this.fileList = []
        return
      }
      this.picUrl = true
      let fileList = []
      let arr = paths.split(',')
      for (var a = 0; a < arr.length; a++) {
        let url = getFileAccessHttpUrl(arr[a])
        fileList.push({
          uid: uidGenerator(),
          name: getFileName(arr[a]),
          status: 'done',
          url: url,
          response: {
            status: 'history',
            message: arr[a],
          },
        })
      }
      this.fileList = fileList
    },
    handleChange(info) {
      if(info.fileList.length === 0){
        this.$emit('loadOk',0)
      }
      let fileList=[]
      if (info.file.status  === 'uploading'){
        fileList = info.fileList
      }
      if (info.file.status === 'done') {
        if (info.file.response.success) {
          fileList = info.fileList
          fileList = fileList.map((file) => {
            if (file.response) {
              if (file.response.status === 'history') {
                file.url = file.response.message
              } else if (info.file.status === 'done') {
                if (file.response.result){
                  file.url = file.response.result.url
                }
              }
            }
            return file
          })
        } else {
          this.handleDelete(info.file)
          info.file.status = 'error'  //标记失败
          this.$message.error(`${info.file.name} 上传失败.`)
        }
        //this.$message.success(`${info.file.name} 上传成功!`);
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 上传失败.`)
        this.handleDelete(info.file)
      } else if (info.file.status === 'removed') {
        this.handleDelete(info.file)
      }
      if (!(info.file.status === 'toolager'
        || info.file.status === 'error'
        || info.file.status === 'removed'
        || info.file.status == undefined) ){
        this.fileList = fileList
      }
      if (info.file.status === 'done' || info.file.status === 'removed') {
        if (info.file.status === 'history'||(info.file.response && info.file.response.success)) {
          this.handlePathChange()
        }
      }
    },
    handleDelete(file_) {
      let index= this.fileList.findIndex((file) => file.uid === file_.uid)
      //如有需要新增 删除逻辑
      this.fileList.splice(
        index,1
      )
    },
    handlePathChange() {
      const uploadFiles = this.fileList
      let path
      if (!uploadFiles || uploadFiles.length == 0) {
        path = ''
      }
      let arr = []
      if (!this.isMultiple) {
        arr.push(uploadFiles[uploadFiles.length - 1].response.result.url)
        path = arr.join(',')
      } else {
        for (var a = 0; a < uploadFiles.length; a++) {
          arr.push(uploadFiles[a].url || uploadFiles[a].message)
        }
        path = arr
      }
      this.$emit('loadOk', this.fileList)
    },
  }
}
</script>

<style scoped>

</style>